<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}">博客详情页</title>
    <!--标题栏图标-->
    <link rel="icon" href="../static/images/Common/favicon.ico" th:href="@{/images/Common/favicon.ico}"
          type="images/x-ico"/>
    <link rel="stylesheet" href="../static/lib/semantic/semantic.min.css"  th:href="@{/lib/semantic/semantic.min.css}">
    <link rel="stylesheet" href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}">
    <!--引入typo.css-->
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
    <!--引入prism-->
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <!--引入tocbot-->
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
    <link rel="stylesheet" href="../static/css/me-common.css" th:href="@{/css/me-common.css}">
    <link rel="stylesheet" href="../static/css/me-special.css" th:href="@{/css/me-special.css}">
    <link rel="stylesheet" href="../static/css/me-media.css" th:href="@{/css/me-media.css}">
    <link rel="stylesheet" href="../static/css/cover-semantic.css" th:href="@{/css/cover-semantic.css}">
</head>
<body>


<!------导航------>
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <img src="../static/images/Common/logo_row_simple.png" th:src="@{/images/Common/logo_row_simple.png}"
                 class="left float image m-margin-right-middle m-mobile-center" height="50px" alt="">
            <a href="index.html" th:href="@{/}" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'"><i
                    class="home icon m-margin-right-no"></i>&nbsp;首页</a>
            <a href="categories.html" th:href="@{/categories/-1}" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i
                    class="folder open icon m-margin-right-no"></i>&nbsp;分类</a>
            <a href="tags.html" th:href="@{/tags/-1}" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'"><i
                    class="tags icon m-margin-right-no"></i>&nbsp;标签</a>
            <a href="archives.html" th:href="@{/archives}" class="m-item item m-mobile-hide" th:classappend="${n==4} ? 'active'"><i
                    class="archive icon m-margin-right-no"></i>&nbsp;归档</a>
<!--            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==5} ? 'active'"><i-->
<!--                    class="heartbeat icon m-margin-right-no"></i>娱乐<i-->
<!--                    class="angle down icon m-margin-right-no "></i></a>-->
            <a href="links.html" th:href="@{/links}" class="m-item item m-mobile-hide" th:classappend="${n==6} ? 'active'"><i
                    class="linkify icon m-margin-right-no"></i>&nbsp;外链</a>
            <a href="https://music.xinglongfei.cn/" target="_blank"  class="m-item item m-mobile-hide"><i
                    class="music icon m-margin-right-no"></i>&nbsp;音乐</a>
            <a href="about.html" th:href="@{/about}" class="m-item item m-mobile-hide" th:classappend="${n==7} ? 'active'"><i
                    class="user icon m-margin-right-no"></i>&nbsp;关于我</a>
            <div class="right m-item item m-mobile-hide">
                <form name="search" method="post" action="" th:action="@{/search}" target="_blank">
                    <div class="ui inverted transparent input">
                        <input type="text" class="m-normal-font-size" name="query" placeholder="请输入标题关键字">
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <a href="#" class="ui black menu toggle icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>


<!------底部footer------>
<footer th:fragment="footer">
    <!--底部teal颜色的条-->
    <div class="ui segment vertical teal inverted m-padded-tb-mini " style="height: 5px;padding: 0!important;"></div>
    <!--底部footer正文-->
    <div class="ui inverted vertical segment m-padded-tb-big">
        <div class="ui container">
            <div class="ui stackable grid">
                <!--QQ微信支付宝打赏二维码占六个栅栏-->
                <div class="five wide center aligned column m-children-center">
                    <!--QQ打赏二维码-->
                    <div class="m-inline-block m-margin-right-small">
                        <img src="../static/images/Common/QQ.png" th:src="@{/images/Common/QQ.png}"
                             class="ui rounded image" alt=""
                             style="width: 100px;height: 100px">
                        <span class="m-margin-top-small m-opacity-mini">QQ打赏</span>
                    </div>
                    <!--微信打赏二维码-->
                    <div class="m-inline-block m-margin-right-small">
                        <img src="../static/images/Common/WeChat.png" th:src="@{/images/Common/WeChat.png}"
                             class="ui rounded image" alt=""
                             style="width: 100px;height: 100px">
                        <span class="m-margin-top-small m-opacity-mini">微信打赏</span>
                    </div>
                    <!--支付宝打赏二维码-->
                    <div class="m-inline-block">
                        <img src="../static/images/Common/Pay.png" th:src="@{/images/Common/Pay.png}"
                             class="ui rounded image" alt=""
                             style="width: 100px;height: 100px">
                        <span class="m-margin-top-small m-opacity-mini" >支付宝打赏</span>
                    </div>
                </div>
                <!--站点声明文字表述战11个栅栏-->
                <div class="eleven wide left aligned column ">
                    <h4 class="ui teal header">站点声明：</h4>
                    <p class="m-opacity-mini">1.文中的商标及图像版权属于其合法持有人，只供传递信息之用，非商务用途。交流时请遵守理性，宽容的原则。</p>
                    <p class="m-opacity-mini">2.所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。举报邮箱：<span th:text="#{author.email}"></span></p>
                    <p class="m-opacity-mini">Copyright © 2020 xinglongfei.cn. Designed by Phoenix.
                        <a href="https://beian.miit.gov.cn/" style="color: #ffffff;">备案号：<span th:text="#{website.icp}">赣ICP备xxxxxxxxxx号</span></a> </p>
                </div>
            </div>
        </div>
    </div>
</footer>


<th:block th:fragment="script">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="../static/lib/semantic/semantic.min.js"  th:src="@{/lib/semantic/semantic.min.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
    <script src="../static/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>
    <script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
    <script src="../static/lib/prism/clipboard.min.js" th:src="@{/lib/prism/clipboard.min.js}"></script>
    <script src="../static/lib/tocbot/tocbot.js" th:src="@{/lib/tocbot/tocbot.js}"></script>
    <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
    <script src="../static/lib/waypoint/jquery.waypoints.min.js" th:src="@{/lib/waypoint/jquery.waypoints.min.js}"></script>
    <!--引入放大图片的JS-->
    <script src="../static/js/imgShow.js" th:src="@{/js/imgShow.js}"></script>

</th:block>


</body>
</html>